<template>
  <div>
    <el-row :gutter="20">
      <!-- 添加商品 -->
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <el-button type="primary" round @click="addGood">添加商品</el-button>
        </div>
      </el-col>
      <!-- 搜索 -->
      <el-col :span="10">
        <div class="grid-content bg-purple displa">
          <template>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              style="width: 300px"
            ></el-input>
            <el-button
              icon="el-icon-search"
              circle
              @click="LooksGoods"
            ></el-button>
          </template>
        </div>
      </el-col>
    </el-row>
    <!-- 商品渲染 -->
    <el-table :data="GoodsData" style="width: 100%" row-key="id" border lazy>
      <el-table-column prop="goods_id" label="商品ID" sortable>
      </el-table-column>
      <el-table-column prop="goods_name" label="详情"> </el-table-column>
      <el-table-column prop="goods_number" label="数量" sortable>
      </el-table-column>
      <el-table-column prop="goods_price" label="价格" sortable>
      </el-table-column>
      <el-table-column prop="goods_weight" label="重量" sortable>
      </el-table-column>
      <el-table-column prop="goods_state" label="状态" sortable>
      </el-table-column>
      <el-table-column prop="add_time" label="添加时间"> </el-table-column>
      <el-table-column prop="upd_time" label="更新时间"> </el-table-column>
      <el-table-column prop="hot_mumber" label="热销产品数量"></el-table-column>
      <el-table-column prop="is_promote" label="是否热销">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_promote"
            active-color="#13ce66"
            inactive-color="#ff4949"
            disabled
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="EditGoods(scope.row)"
            circle
            icon="el-icon-edit"
          >
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="删除">
        <template slot-scope="scope">
          <el-button
            type="danger"
            @click="DeleteGoods(scope.row)"
            circle
            icon="el-icon-delete"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 50, 100, 300]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加商品弹窗 -->
    <el-dialog title="添加商品" :visible.sync="dialogaddGoodsVisible">
      <el-form :model="addGoods">
        <el-form-item label="分类">
          <el-input v-model="addGoods.goods_cat"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="addGoods.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="addGoods.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="addGoods.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="重量">
          <el-input v-model="addGoods.goods_weight"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogaddGoodsVisible = false">取 消</el-button>
        <el-button type="primary" @click="addsGoods">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑商品弹窗 -->
    <el-dialog title="添加商品" :visible.sync="dialogEditGoodsVisible">
      <el-form :model="Editgoods">
        <el-form-item label="商品ID">
          <el-input v-model="Editgoods.goods_id"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="Editgoods.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="Editgoods.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="Editgoods.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="重量">
          <el-input v-model="Editgoods.goods_weight"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditGoodsVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditsGoods">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      GoodsData: [],
      //添加商品
      addGoods: {
        goods_cat: "", //分类
        goods_name: "", //商品名称
        goods_price: "", //价格
        goods_number: "", //数量
        goods_weight: "", //重量
      },
      dialogaddGoodsVisible: false, //添加弹窗
      //所搜商品
      input: "", //搜所框
      dialogLookGoodsVisible: false, // 搜索弹窗
      //编辑
      Editgoods: {},
      EditgoodsTow: {},
      dialogEditGoodsVisible: false, //编辑弹窗
      total: 0, //一共多少条信息
    };
  },
  methods: {
    //删除商品
    async DeleteGoods(userinfo) {
      var { data } = await this.$req.delete("/goods/" + userinfo.goods_id);
      console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          showClose: true,
          message: "恭喜你，删除商品成功",
          type: "success",
        });
        this.getsGoods(1, 50);
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    //编辑 -- 弹窗
    async EditGoods(userinfo) {
      this.Editgoods = userinfo;
      this.dialogEditGoodsVisible = true;
      var { data } = await this.$req.get("/goods/" + this.Editgoods.goods_id);
      this.EditgoodsTow = data.data;
    },
    //编辑
    async EditsGoods() {
      this.Editgoods = Object.assign(this.EditgoodsTow, this.Editgoods);
      //   console.log(this.Editgoods);
      var { data } = await this.$req.put(
        "/goods/" + this.Editgoods.goods_id,
        this.Editgoods
      );
      this.dialogEditGoodsVisible = false;
    },
    //所搜商品
    async LooksGoods() {
      if (!this.input == "") {
        var { data } = await this.$req.get("/goods/" + this.input);
        this.GoodsData = [data.data];
        this.input = "";
      } else {
        this.getsGoods(1, 50);
      }
    },
    //添加商品
    async addsGoods() {
      var { data } = await this.$req.post("/goods", this.addGoods);
      console.log(data);
      if (data.meta.status == 201) {
        this.$message({
          showClose: true,
          message: "恭喜你，创建商品成功",
          type: "success",
        });
      } else {
        this.$message.error(data.meta.msg);
      }
      this.dialogaddGoodsVisible = false;
      this.getsGoods(1, 20);
      this.addGoods = {};
    },
    //添加商品 -- 弹窗
    addGood() {
      this.dialogaddGoodsVisible = true;
    },
    //每一页的条数
    handleSizeChange(pagesize) {
      this.getsGoods(1, pagesize);
    },
    //当前页
    handleCurrentChange(pagenum) {
      this.getsGoods(pagenum, 20);
    },
    //封装代码
    async getsGoods(pagenum, pagesize) {
      var { data } = await this.$req.get(
        `/goods?pagenum=${pagenum}&pagesize=${pagesize}`
      );
      //将所有获取到的商品赋值给这个数组
      this.GoodsData = data.data.goods;
      //商品总条数
      this.total = data.data.total;
    },
  },
  //页面渲染
  async created() {
    this.getsGoods(1, 20);
  },
};
</script>

<style>
</style>